<template>
  <div :value="value" :sub="sub" device="pin">
    <el-table :data="value" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-row :gutter="20">
            <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <h2>如果</h2>
                  <el-button class="filter-item" style="float:right;" type="primary" @click="dialogAddConditionVisible = true"> 添加条件 </el-button>
                </div>

                <el-table :data="props.row.conditions" style="width: 100%">
                  <el-table-column label="设备" align="center" prop="name" />
                  <el-table-column label="位置" align="center" prop="position" />
                  <el-table-column label="SN" align="center" prop="sn" />
                  <el-table-column label="发生" align="center" prop="logic">
                    <template slot-scope="{row}">
                      <span v-if="row.tag==='infrared'">{{ row.status | infraredStatusFilter }}</span>
                      <span v-if="row.tag==='door'">{{ row.status | doorStatusFilter }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                    <template slot-scope="{$index}">
                      <el-button type="danger" @click="handleDeleteCondition($index)"> 删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <h2>就执行</h2>
                  <el-button class="filter-item" style="float:right;" type="primary" @click="dialogAddRunVisible = true"> 添加动作 </el-button>
                </div>
                <el-table :data="props.row.run" style="width: 100%">
                  <el-table-column label="设备" align="center" prop="name" />
                  <el-table-column label="位置" align="center" prop="position" />
                  <el-table-column label="SN" align="center" prop="sn" />
                  <el-table-column label="动作" align="center" prop="logic">
                    <template slot-scope="{row}">
                      <span v-if="row.tag==='switch'">{{ row.status | switchStatusFilter }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column label="操作" align="center">
                    <template slot-scope="{$index}">
                      <el-button type="danger" @click="handleDeleteRun($index)"> 删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="ID" type="index" align="center" />
      <el-table-column label="名称" align="center" prop="name" />
      <el-table-column label="逻辑" align="center" prop="logic">
        <template slot-scope="{row}">
          <el-tag :type="row.logic | logicTypeFilter">{{ row.logic | logicFilter }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="启动" align="center">
        <template slot-scope="{row}">
          <el-switch
            v-model="row.enable"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="onEnableChange(row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <!-- <el-button type="primary" @click="toEdit(row)"> 编辑 </el-button> -->
          <!-- <el-button type="danger" @click="handleDelete(row)"> 删除 </el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加条件" :visible.sync="dialogAddConditionVisible">
      <el-table :data="selectConditionDevices">
        <el-table-column label="设备" align="center" prop="name" />
        <el-table-column label="位置" align="center" prop="position" />
        <el-table-column label="引脚编号" align="center" prop="number" />
        <el-table-column label="选择状态" align="center">
          <template slot-scope="{row}">
            <el-select v-model="row.status" placeholder="请选择">
              <el-option v-for="item in row.values" :key="item.value" :disabled="item.select" :label="item.name" :value="item.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{row}">
            <el-button type="success" @click="handleAddCondition(row)"> 添加 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="添加动作" :visible.sync="dialogAddRunVisible">
      <el-table :data="selectRunDevices">
        <el-table-column label="设备" align="center" prop="name" />
        <el-table-column label="位置" align="center" prop="position" />
        <el-table-column label="引脚编号" align="center" prop="number" />
        <el-table-column label="选择动作" align="center">
          <template slot-scope="{row}">
            <el-select v-model="row.status" placeholder="请选择">
              <el-option v-for="item in row.values" :key="item.value" :disabled="item.select" :label="item.name" :value="item.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{row}">
            <el-button type="success" @click="handleAddRun(row)"> 添加 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import { CMD_AXIS } from '@/utils/cmd'

export default {
  name: 'Auto',
  components: { },
  filters: {
    logicFilter(logic) {
      if (logic === 'and') {
        return '同时满足'
      }
      if (logic === 'or') {
        return '满足任一条件'
      }
    },
    logicTypeFilter(logic) {
      if (logic === 'and') {
        return 'success'
      }
      if (logic === 'or') {
        return 'warning'
      }
    }
  },
  props: {
    value: {
      type: Array,
      default: null
    },
    device: {
      type: Object,
      default: null
    },
    sub: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      resetPosition: 0,
      showHeader: false,
      tableWidth: '150',
      dialogSelectPosFormVisible: false,
      selectIndex: 0,
      current_index: null,

      autos: [],
      selectConditionDevices: [],
      selectRunDevices: [],
      dialogAddConditionVisible: false,
      dialogAddRunVisible: false
    }
  },
  watch: {
    value: {
      deep: true,
      handler(val) {
        this.setValue(val)
      }
    },
    device: {
      deep: true,
      handler(val) {
        this.setDevice(val)
      }
    }
  },
  created() {
    this.device = this.$route.query
    console.log('pin:')
    console.log(this.pin)
    console.log('value:')
    console.log(this.value)
    for (var i = 0; i < this.pin.length; i++) {
      if (this.pin[i].mode === '1') {
        this.selectConditionDevices.push(this.pin[i])
      }
      if (this.pin[i].mode === '2') {
        this.selectRunDevices.push(this.pin[i])
      }
    }
  },
  methods: {
    setValue(val) {
      this.value = val
    },
    setDevice(val) {
      console.log('device changed!!!')
      this.device = val
      console.log(this.device)
    },
    handleAddCondition(row) {

    },
    handleAddRun(row) {

    },
    onGetStatus(pin, index) {
      console.log('获取轴' + index + '状态')
      this.publish(this.sub, JSON.stringify({
        code: CMD_AXIS[index].get_status.toString(),
        msg: '1'
      }))
    },
    publish(topic, message) {
      console.log('推送消息')
      console.log('topic:' + topic)
      console.log('message:' + message)
      this.$mqtt.publish(topic, message)
    }
  }
}
</script>

<style lang="scss" scoped>

  .dashboard-editor-container {
    background-color: #e3e3e3;
    min-height: 100vh;
    padding: 50px 60px 0px;
  }
  .position-text{
    color: #ff00ff;
    font-size: 25px;
  }
</style>
